<template>
	<view>
		<!-- 搜索框 -->
		<view class="searchBox">
			<view class="searchInput">
				<image src="/static/images/icon_search.png"></image>
				<input v-model="keywords" @confirm="getResult(keywords)" @input="getSuggestion" type="text"
					placeholder="H3S">
			</view>
			<navigator class="cancel" open-type="navigateBack">取消</navigator>
		</view>
		<!-- 历史搜索 -->
		<view class="historyPage" v-if="!searched">
			<view class="h3">历史搜索</view>
			<view @click="getResult(item)" v-for="item in keywordsList" :key="item" class="keywords">
				{{item}}
			</view>

			<view class="h3">热门搜索</view>
		</view>

		<!-- 搜索结果 -->
		<view class="listPage" v-else>
			<view class="result" v-if="resultList.length">
				<view class="item" v-for="item in resultList" :key="item.skuId">
					<!-- {{item.name}} -->
					<search-item :item="item"></search-item>
				</view>
			</view>

			<view class="kong" v-else>
				<img src="https://file02.xgimi.com/official/images/uni/sousuo_default_img@2x.png?version=v1.1.0" alt="">
				<view>搜索无结果</view>
			</view>
			<view class="hr">-- 看看大家买了什么 --</view>
			<!-- 推荐列表 -->
			<view class="recommendationList">
				<view class="item" v-for="item in list" :key="item.skuId">{{item.name}}</view>
			</view>
		</view>

		<!-- 推荐搜索 -->
		<view class="suggestionList">
			<view class="item" @click="getResult(item.name)" v-for="item in suggestionList" :key="item.name">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script setup>
	// 导入接口
	import {
		getList, // 推荐
		getResultList, // 搜索
		getSuggestionList, // 搜索提示
	} from "../../../api/auth.js"
	// 导入ref
	import {
		ref
	} from "vue"
	// ------定义数据--------------------------------------------------------------------------------
	// 是否搜索
	const searched = ref(false)
	// 搜索的结果
	const list = ref([])
	// 推荐结果（大家买的什么）
	const resultList = ref([])
	const keywords = ref('')
	// 搜索关键词记录(本地取数据)
	var defaultList = uni.getStorageSync("keywords") || [];
	// 搜索历史
	const keywordsList = ref(defaultList);
	// 提示列表
	const suggestionList = ref([])
	// ------定义数据--------------------------------------------------------------------------------

	// ------定义方法--------------------------------------------------------------------------------
	// 推荐
	function getLists() {
		getList()
			.then(res => {
				list.value = res.data;
			})
	}
	getLists()
	// 搜索
	function getResult(key) {
		// 更新keywords
		keywords.value = key;
		// 更新搜索列表
		keywordsList.value.unshift(key);
		// 去重
		keywordsList.value = [...new Set(keywordsList.value)]
		// 本地存储
		uni.setStorageSync("keywords", keywordsList.value)
		// 清空 suggestionList
		suggestionList.value = [];
		// 设置已经搜索为true
		searched.value = true;
		// 发起网络请求
		getResultList({
				keywords: key
			})
			.then(res => {
				// 更新搜索结果列表
				resultList.value = res.data;
				console.log(res.data)
			})
		// 

	}
	// 获取搜索提示
	function getSuggestion() {
		getSuggestionList({
			keywords: keywords.value
		})
	}
	// ------定义方法--------------------------------------------------------------------------------
</script>

<style lang="scss" scoped>
	// 搜索框
	.searchBox {
		height: 120rpx;
		align-items: center;
		display: flex;
		padding: 0 0 0 30rpx;

		.searchInput {
			display: flex;
			align-items: center;
			height: 80rpx;
			border: 1rpx solid #eee;
			border-radius: 80rpx;
			flex: 1;
			line-height: 80rpx;
			padding: 0 15rpx;

			input {
				flex: 1
			}

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 15rpx;
				vertical-align: middle;
			}

			text {
				color: #ddd;
				font-size: 28rpx;
			}
		}

		.cancel {
			padding: 0 30rpx;
		}
	}

	// 推荐搜索列表
	.suggestionList {
		position: fixed;
		top: 120rpx;
		left: 0;
		right: 0;
		background-color: #fff;

		.item {
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #eee;
		}
	}

	// 搜索历史记录
	.keywords {
		background-color: #eee;
		border-radius: 80rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		display: inline-block;
		margin-left: 30rpx;
		font-size: 24rpx;
	}

	// 标题
	.h3 {
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 30rpx;
	}

	// 搜索结果
	.listPage {
		width: 100vw;
		min-height: 91vh;
		background-color: #f5f5f5;

		// 有结果
		.result {
			padding-top: 10rpx;
		}

		// 无结果
		.kong {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 50rpx 0;
			background-color: #fff;

			img {
				width: 50%;
			}
		}

		// 分割线
		.hr {
			text-align: center;
			line-height: 100rpx;
			font-size: 26rpx;
		}

		// 推荐列表
		.recommendationList {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;

			.item {
				width: 45%;
				height: 300rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
			}
		}
	}
</style>